<template>
	<div class="publish-eva-main">
		<div class="content_mid">
			<!--商品-->
			<div class="goods fix">
				<img class="goodsimg fl" src="">
				<div class="goodsright fl fix">
					<div class="goodsright_describe fl">评分：</div>
					<ul class="goodsright_star fl fix">
						<li class="goodsright_starli fl"><img class="goodsright_starliimg" src="../assets/image/evaluate_pre@2x.png"></li>
						<li class="goodsright_starli fl"><img class="goodsright_starliimg" src="../assets/image/evaluate@2x.png"></li>
						<li class="goodsright_starli fl"><img class="goodsright_starliimg" src="../assets/image/evaluate@2x.png"></li>
						<li class="goodsright_starli fl"><img class="goodsright_starliimg" src="../assets/image/evaluate@2x.png"></li>
						<li class="goodsright_starli fl"><img class="goodsright_starliimg" src="../assets/image/evaluate@2x.png"></li>
					</ul>
					<div class="goodsright_describe fl">非常好！</div>
				</div>
			</div>
			<!--评价-->
			<div class="evaluate">
				<textarea class="evaluate_text" placeholder="亲爱的呀~您可真会挑，这么好的宝贝快告诉大家把~"></textarea>
			</div>
			<!--上传照片-->
			<div class="uploadphoto">
				<ul class="uploadphoto_list fix">
					<li><img src="" class="uploadphoto_img"><img class="close_icon" src="../assets/image/delete_img@2x.png"></li>
					<li><img src="" class="uploadphoto_img"><img class="close_icon" src="../assets/image/delete_img@2x.png"></li>
					<li><img src="" class="uploadphoto_img"><img class="close_icon" src="../assets/image/delete_img@2x.png"></li>
					<li><img class="uploadphoto_lastimg" src="../assets/image/upload@2x.png"></li>
				</ul>
				<div class="uploadphoto_describe fix">
					<div class="uploadphoto_left fl fix">
						<img class="uploadphoto_leftimg fl" src="../assets/image/anonymous_pre@2x.png">
						<p>匿名</p>
					</div>
					<div class="uploadphoto_right fr">您写的评价会以匿名形式展现</div>
				</div>
			</div>
		</div>
		<div class="content_mid">
			<!--店铺-->
			<div class="store">
				<div class="store_title fix">
					<img class="store_titleimg fl" src="../assets/image/store_evaluate@2x.png">
					<p>{{storeName}}</p>
				</div>
				<div class="store_bottom fix">
					<div class="store_bottomname fl">店铺评分：</div>
					<ul class="store_bottomstar fl fix">
						<li class="store_bottomstarli fl"><img class="store_bottomstarliimg" src="../assets/image/evaluate_pre@2x.png"></li>
						<li class="store_bottomstarli fl"><img class="store_bottomstarliimg" src="../assets/image/evaluate@2x.png"></li>
						<li class="store_bottomstarli fl"><img class="store_bottomstarliimg" src="../assets/image/evaluate@2x.png"></li>
						<li class="store_bottomstarli fl"><img class="store_bottomstarliimg" src="../assets/image/evaluate@2x.png"></li>
						<li class="store_bottomstarli fl"><img class="store_bottomstarliimg" src="../assets/image/evaluate@2x.png"></li>
					</ul>
					<div class="store_bottomdescribe fl">非常好！</div>
				</div>
			</div>
		</div>
		<!--占位-->
		<div class="placeholder"></div>
		<!--提交-->
		<router-link to="/" class="commit">发布</router-link>
		<!--售后原因弹窗-->
		<div v-bind:class="AFASCause" class="popup">
			<ul class="afascause_list">
				<li class="afascause_li">无</li>
				<li class="afascause_li">产品质量问题</li>
			</ul>
			<div class="ok" @click="isAFASCause">确定</div>
		</div>
	</div>
</template>
<script type="text/javascript">
import Vue from 'vue'

export default {
	name: 'app',
	data () {
		return {
			AFASCause: 'hidden',
			storeName: '乐町女装官方旗舰店',
		}
	},
	methods:{
		isAFASCause () {
			this.AFASCause = this.AFASCause ? '': 'hidden';
		},
	}
}
</script>
<style lang="scss">
  .publish-eva-main{
    .content_mid{ margin-bottom: 0.2rem; padding: 0 0.3rem; background: #fff; }
    .goods{ height: 2rem; border-bottom: 1px solid #f1f1f1; }
    .goodsimg{ margin-top: 0.33rem; width: 1.34rem; height: 1.34rem; background: #eee; }
    .goodsright{ padding-top: 0.6rem; height: 0.4rem; }
    .goodsright_describe{ padding-left: 0.3rem; height: 0.4rem; line-height: 0.4rem; font-size: 0.28rem; color: #151517; }
    .goodsright_star{}
    .goodsright_starli{
      width: 0.4rem; height: 0.4rem;
      +.goodsright_starli{ margin-left: 0.2rem; }
      .goodsright_starliimg{ display: block; width: 0.4rem; height: 0.4rem; }
    }
    .evaluate{ margin-top: 0.2rem; height: 3.6rem; }
    .evaluate_text{ padding: 0.2rem; width: 6.5rem; height: 3.2rem; line-height: 0.46rem; font-size: 0.26rem; color: #999; background: #f4f5f5; }
    .uploadphoto{ padding: 0.2rem 0 0.3rem; }
    .uploadphoto_list{
      li{
        float: left; width: 1.56rem; height: 1.56rem; position: relative;
        +li{ margin-left: 0.2rem; }
      }
    }
    .uploadphoto_img{ display: block; width: 1.56rem; height: 1.56rem; }
    .close_icon{ display: block; width: 0.4rem; height: 0.4rem; position: absolute; right: 0; top: 0; }
    .uploadphoto_lastimg{ display: block; width: 1.56rem; height: 1.56rem; }
    .uploadphoto_describe{ padding-top: 0.3rem; height: 0.28rem; }
    .uploadphoto_left{
      .uploadphoto_leftimg{ display: block; width: 0.28rem; height: 0.28rem; }
      p{ float: left; padding-left: 0.1rem; line-height: 0.28rem; font-size: 0.28rem; color: #333; }
    }
    .uploadphoto_right{ line-height: 0.28rem; font-size: 0.28rem; color: #999; }
    .store{ padding: 0.3rem 0; }
    .store_title{
      height: 0.32rem;
      .store_titleimg{ display: block; width: 0.32rem; height: 0.32rem; }
      p{ float: left; padding-left: 0.2rem; line-height: 0.32rem; font-size: 0.3rem; color: #666;  }
    }
    .store_bottom{ padding-top: 0.3rem; }
    .store_bottomname{ width: 2.48rem; height: 0.4rem; line-height: 0.4rem; font-size: 0.32rem; color: #151517; }
    .store_bottomstarli{
      width: 0.4rem; height: 0.4rem;
      +.store_bottomstarli{ margin-left: 0.2rem; }
      .store_bottomstarliimg{ display: block; width: 0.4rem; height: 0.4rem; }
    }
    .store_bottomdescribe{ padding-left: 0.3rem; height: 0.4rem; line-height: 0.4rem; font-size: 0.28rem; color: #151517; }
    .placeholder{ height: 1.6rem; }
    .commit{ display: block; width: 100%; height: 0.98rem; line-height: 0.98rem; text-align: center; font-size: 0.3rem; color: #fefefe; background: linear-gradient(to right,#fe4a6b,#e8163f); position: fixed; left: 0; bottom: 0; z-index: 20; }
    .popup{ width: 100%; height: 100%; background: rgba(0,0,0,.2); position: fixed; left: 0; top: 0; z-index: 20; }
    .afascause_list{ width: 100%; position: absolute; left: 0; bottom: 0.98rem; z-index: 20; }
    .afascause_li{ height: 0.88rem; line-height: 0.88rem; font-size: 0.28rem; color: #151517; }
    .afascause_li:hover{ color: #ff365d; }
    .ok{ width: 100%; height: 0.98rem; line-height: 0.98rem; text-align: center; font-size: 0.3rem; color: #fefefe; background: linear-gradient(to right,#fe4a6b,#e8163f); position: fixed; left: 0; bottom: 0; z-index: 20; }
  }
</style>
